<template>
  <div class="component-container" >
    <el-form :model="tableData"  class="content">
      <!-- 提交表格 -->
      <el-form-item
        v-for="(workingTimeArr, index) in tableData.workingTimeArr"
        :key="index"
        :rules="{
          required: true,
          message: '数据不能为空',
          trigger: 'blur',
        }"
        style="margin-bottom: 10px; list-style: none; width: 100%;"
      >
        <div class="flexrow">
          <el-time-select
            placeholder="起始时间"
            style="margin-right: 10px; width: 35%"
            v-model="workingTimeArr.startTime"
            :picker-options="{
              start: '08:30',
              step: '00:30',
              end: '23:00',
            }"
          >
          </el-time-select>
          <el-time-select
            placeholder="结束时间"
            v-model="workingTimeArr.endTime"
            style="margin-left: 10px; width: 35%"
            :picker-options="{
              start: '08:30',
              step: '00:30',
              end: '23:00',
              minTime: workingTimeArr.startTime,
            }"
          >
          </el-time-select>
          <el-button
            v-if="workingTimeArr.showDelet"
            @click.prevent="removeSelect(workingTimeArr)"
            class="delete"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item class="flex-right">
        <el-button @click="addSelect">新增选项</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "selectComponent",
  props: {
    table: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      //子组件不可以直接操作父组件的数据，用tableData接受父组件的数据
      tableData: {},
    };
  },
  created(){
  },
  methods: {
    init() {
      this.tableData = this.table;
    },
    removeSelect(item) {
      var index = this.tableData.workingTimeArr.indexOf(item);
      if (index !== -1) {
        this.tableData.workingTimeArr.splice(index, 1);
      }
    },
    addSelect() {
      if (this.tableData.workingTimeArr.length == 4) {
        this.$notify({
          title: "Error",
          message: "已达到最大的增加数量",
          type: "error",
          duration: 2000,
        });
      } else {
        this.tableData.workingTimeArr.push({
          startTime: "",
          endTime: "",
          showDelet: true,
        });
      }
    },
  },
};
</script>
<style lang=less scoped>

.flexrow {
  width: 100%;
  display: flex;
  // border: 1px solid black;
}
.delete {
  margin-left: 20px;
}
.flex-right {
  width: 100%;
  display: flex;
  justify-content: left;
  // border: 1px solid black;
}
.content{
  width: 100%;
  // border: 1px solid black;
}
</style>